<template>
	<view class="content">
		<view class="banner">
			<swiper circular autoplay interval=3000>
				<swiper-item v-for="(item,index) in imgList" :key="index" @click="imgTap(item.url)">
					<image :src="item.image"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="tips" v-if='titles.length>0'>
		<uni-notice-bar :num="num" :speed="speed" showGetMore="true" showIcon="true"
				style="width: 750rpx;padding: 30rpx  20rpx 10rpx 20rpx;" :single="true" :scrollable="true"
				:text="titles" @getmore="tomore"></uni-notice-bar>
		</view>
		<view class="func-box">
			<view class="func-item" v-for="(item,index) in fucList" :key="index" @tap="funcClick(item.url,index)">
				<image :src='item.img' mode=""></image>
				<view class="func-item-right">
					<view class="func-item-title">{{item.title}}
						<text class="msg" v-if="index==7&&stopNum>0">
							<template v-if="stopNum>99">
								99+
							</template>
							<template v-else>
								{{stopNum}}
							</template>
						</text>
					</view>
					<view class="func-item-detile">{{item.detile}}</view>
				</view>
			</view>
		</view>
		<u-action-sheet :list="tablist" v-model="tablistshow" @click="toxgindex"></u-action-sheet>
		<u-tabbar v-model="current" :list="list" active-color='#003690' :before-switch="beforeSwitch"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				// array: ['安装工','检测工','维修工'],
				index: 0,
				userinfo: {},
				value: '', //搜索关键词
				installList: [], //安装列表
				dosearch: false,
				showAcount: false,
				page: 1,
				fucList: [{
						img: '/static/homeicon/shangchuan.png',
						title: '气表上报',
						detile: '上传气表所用的气表数',
						url: '/pages/meter_fild/update_file'
					}, 
					{
						img: '/static/homeicon/lishi.png',
						title: '报表历史',
						detile: '查看往期所用气数',
						url: '/pages/meter_fild/update_histor'
					}, 
					// {
					// 	img: '/static/homeicon/gaiguan.png',
					// 	title: '预约改管',
					// 	detile: '预约工作人员上门服务',
					//  url: '../yuyue/yuyue'
					// },
					{
						img: '/static/homeicon/yyaj.png',
						title: '业务预约',
						detile: '预约工作人员上门服务',
						url: '/pages/yuyue/security'
					},
					{
						img: '/static/homeicon/ajjl.png',
						title: '预约记录',
						detile: '查看预约记录',
						url: '/pages/yuyuelist/index'
					},
					{
						img: '/static/homeicon/tongxunlu.png',
						title: '通讯录',
						detile: '查看管理员联系方式',
						// url: '/pages/mail_list/mobiles'
						url: '/pagesD/addressBook/index'
					},
					{
						img: '/static/homeicon/qiba.png',
						title: '气表板块',
						detile: '更换、清零、抄表记录',
						url: '/pages/gas-meter/gas-meter'
					},
					{
						img: '/static/homeicon/ygsb.png',
						title: '员工识别',
						detile: '查询员工真伪',
						url: '/pages/staff-testing/staff-testing'
					},
					{
						img: '/static/homeicon/tqtz.png',
						title: '停/复气通知',
						detile: '停/复气通知信息',
						url: '/pages/news/gasList/index'
					},
					{
						img: '/static/homeicon/wddh.png',
						title: '网点导航',
						detile: '查看附近网点',
						url: '/pages/map-navigt/map-navigt'
					},
					{
						img: '/static/homeicon/hzhh.png',
						title: '户主换号',
						detile: '更换户主手机号码',
						url: ''
					},
					{
						img:'/static/homeicon/aqxcs.png',
						title:'安全小常识',
						detile: '学习安全小常识',
						url:'/pagesD/materials/index'
					}
				],
				titles: [],
				speed: '',
				num: 0,
				imgList: [],
				token: '',
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						isDot: false,
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						isDot: false,
						customIcon: false,
					},
				],
				current: 0,
				tablist: [{
					text: '手机号验证',
					color: '#003690',
					fontSize: 28,
					subText: '使用手机号验证修改'
				}, {
					text: '身份证验证',
					color: '#003690',
					fontSize: 28,
					subText: '使用身份证验证修改'
				}],
				tablistshow: false,
				stopNum: 0,
			};
		},
		onReachBottom() {
			this.page++
		},
		onLoad() {
			this.userinfo = this.user
			// this.getInstallDetail()
			this.$request.request({
				url: '/index/meke',
				method: 'GET',

			}).then(res => {
				if (res.data.code == 0) {
					this.fucList.splice(this.fucList.length - 1, 1)
				}
			})

		},
		onShow() {
			
			// this.validationToken();
			// return;
			if (uni.getStorageSync('userinfo')) {
				if (uni.getStorageSync('login') == '协管员') {
					uni.redirectTo({
						url: '/pagesA/index/volunteerindex'
					})
				} else if (uni.getStorageSync('login') == '安全员') {
					uni.redirectTo({
						// url: '/pagesC/index/volunteerindex',
						url: '/pagesA/index/volunteerindex'
					})
				} else if (uni.getStorageSync('login') == '员工') {
					uni.redirectTo({
						url: '/pagesB/index/index'
					})
				}
			} else {
				uni.reLaunch({
					url: '../login/login'
				})
			}
			if (uni.getStorageSync('token')) {
				this.getStopNum()
				uni.getStorage({
					key: 'token'
				}).then(da => {
					this.token = da[1].data
				})
				setTimeout(() => {
					this.getInstallDetail()
				}, 10)
			}
	
		
		},

		methods: {
			
			getStopNum() {
				var _this = this
				uni.request({
					url: _this.$url + 'stop.stop_notice/getListcount',
					method: 'GET',
					header: {
						token: uni.getStorageSync('token')
					},
					success: res => {
						if (res.data.code == 1) {
							_this.stopNum = res.data.data
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			validationToken() {
				if (uni.getStorageSync('token')) {

				} else {
					uni.reLaunch({
						url: '../login/login'
					})
				}
			},
			tomore() {
				uni.navigateTo({
					url: '../news/newslist/newslist'
				})
			},
			beforeSwitch(index) {
				console.log(index)
				// this.current=index;
				if (index == 0) {
					// uni.navigateTo({
					// 	url: '/pages/index/index'
					// })
				} else if (index == 1) {
					uni.redirectTo({
						url: '/pages/user/me'
					})
				}

			},
			imgTap(url) {
				console.log(url)
				url&&uni.navigateTo({
					url: '/pages/webview/webview?url=' + url
				})
			},
			funcClick(url,index) {
				console.log(url,index);
				if(index==9){
					this.tablistshow = true
					return;
				}
				this.$navTo(url)
			},

			toxgindex(index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/usertel/usertel'
					});
				} else {
					uni.navigateTo({
						url: '/pages/usertel/usertelcard'
					});
				}

			},

			// 获取安装数据
			getInstallDetail() {
				// let that = this
				// that.$request.request({
				// 	url: '/common/index_info',
				// 	method: 'POST',
				// 	data: {
				// 		token: that.token
				// 	}
				// }).then(res => {

				// 	that.imgList = res.data.data.banner

				// 	that.titles = [res.data.data.notice]
				// })
				let that = this
				uni.request({
					url: this.$url + 'common.banner/getList',
					method: 'POST',
					data: {
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						that.imgList = res.data.data
					}
				})
				this.num = 0
				uni.request({
					url: this.$url + 'common.notice/getList',
					method: 'POST',
					header: {
						token: that.token
					},
					success: (res) => {
						if (res.data.code == 1) {
							that.titles = []
							that.num += res.data.data.count
							that.speed = res.data.data.speed
							that.titles.push(res.data.data.list[0].title + res.data.data.list[0]
								.createtime_text)
						}

					}
				})
				uni.request({
					url: this.$url + 'notification.notification/getLists',
					method: 'POST',
					header: {
						token: that.token
					},
					success: (res) => {
						if (res.data.code == 1) {
							that.num += res.data.data.count
						}
					}
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.uni-noticebar[data-v-24a05de4] {
		margin-bottom: 0;
	}

	page {
		background-color: #F5F5F5;
		// padding-bottom: 200rpx;
		// margin-bottom: 150rpx;
	}

	.content {
		padding-bottom: 140rpx;
	}

	.banner {
		width: 100%;
		height: 400rpx;

		swiper {
			width: 750rpx;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.tips {
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #777;
		background-color: #fff;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 30rpx;
		}
	}

	.func-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: #fff;
		margin-top: 20rpx;

		.func-item {
			display: flex;
			justify-content: center;
			width: 50%;
			padding: 30rpx 0;

			image {
				width: 50rpx;
				height: 60rpx;
				margin: 0 12rpx 0 50rpx;
			}

			.func-item-right {
				width: 65%;
			}

			.func-item-title {
				font-size: 32rpx;
				line-height: 28rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				margin-bottom: 5px;
				display: flex;
				align-items: center;

				.msg {
					padding: 0 10rpx;
					border-radius: 50rpx;
					border: 1rpx solid red;
					color: red;
					margin-left: 10rpx;
				}
			}

			.func-item-detile {
				font-size: 24rpx;
				line-height: 28rpx;
				text-align: left;
				color: #777;
				text-overflow: hidden;
			}
		}
	}
</style>
